﻿@{
    Layout = null;
}

@*微信管理*@

<style>
    .myTabs.nav-tabs > li.active > a, .myTabs.nav-tabs > li.active > a:focus, .myTabs.nav-tabs > li.active > a:hover {
        color: #555;
        cursor: default;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }
    #body_div {
        position: relative;
    }
    #body_div .height-150 {
      
        border-radius: 5px;
        border: 1px solid #E1DEDE;
        margin-top: 10px;
    }
     #body_div .height-150 > div {
        margin: 60px 50px 0 30px;
    }
    #body_div .height-150 > div > div:nth-child(1)>span:nth-child(1) {
        display:inline-block;
        width:90px;
        color:#444444;
    }
    #body_div .height-150 > div button {
        float: right;
    }
    #body_div .height-150 > div>div:nth-child(2){
        margin-top:25px;
    }
    .CopyInput{ 
        opacity:0;
        width:5px;
    }

    .question {
        display: inline;
        cursor:pointer;
        position:relative;
    }
    .detail {
        display: none;
        position:absolute;
        top:14px;
        background: #FFFFFF;
        padding: 10px;
        width:600px;
        text-align:left;
        border:1px solid #E5E5E5;
        z-index:1;
    }
    .detail img{
        display:block;
        width:100%
    } 
    .question:hover .detail {
        display: inline-block;
    }

    #picker2 {
        position: relative;
    }

    #picker2 .webuploader-pick {
        display: block;
    }

    #picker2 input[type='file'] {
        opacity: 0;
        background:green;
        display: block;
        /*width: 91px;
        height: 91px;*/
        width:100%;
        position: absolute;
        z-index: 99;
    }

    #picker2 > div:nth-child(2) {
        width:100% !important;
        overflow: visible !important;
    }

    .row>div:nth-child(1){
        white-space:nowrap;
    }

    #checkoutImg {
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
    }

    #phone .modal-body .phone-show > img {
        width: 100%;
        height: 100%;
    }

    #phone .modal-body .phone-show > #show-con {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #phone .modal-dialog {
        width: 300px;
    }

    #phone .modal-content {
        border-radius: 10px;
        width: 300px;
        position: relative;
    }

        #phone .modal-content > button {
            position: absolute;
            top: 5px;
            right: 10px;
        }

    #phone .modal-body {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    } 
</style>

<script src="~/Scripts/MGJJS/ApiConfigManager/WX_bing.js"></script>

<script src="~/Scripts/MGJJS/TraceSource/PageOperation/jquery.qrcode.min.js"></script>
<div style="margin:15px 60px 0 20px;">
    <!-- 导航区 -->
    <ul class="myTabs nav nav-tabs" role="tablist">
        <li role="presentation" class="active" onclick="tab1()"><a href="#WX_AppInfo" role="tab" data-toggle="tab">公众号信息</a></li>
        <li role="presentation" onclick="tab2()"><a href="#Merchant" role="tab" data-toggle="tab">商户信息</a></li>
    </ul>
    <!-- 面板区 -->
    <div class="tab-content" id="body_div">
        <img id="checkoutImg"  style="display:none;"   /> 
        <form id="WX_AppInfo" class="tab-pane active tab-pane text-center padding-top-80 height-500" name="WX_AppInfo" role="tabpanel" style="position:relative;background:#F8F8F8">
            <input id="AppState" name="AppState" type="hidden" />
            <div>
                <div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 text-right"><span class="red-700">*</span>AppId:</div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <input type="text" name="AppId" id="AppId" class="form-control" />
                    </div>
                </div>
                <div class="row" style="position:relative">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 text-right"><span class="red-700">*</span>AppSecret:</div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <input type="text" name="AppSecret" id="AppSecret" class="form-control" />
                    </div>
                </div>
                <div class="margin-top-50" style="font-size:12px;">
                    如果您有微信菜单,此参数可用于服务号菜单编辑和获取通过微信认证公众账号的粉丝的相关信息。若有更改请重新提交!
                    <div class="question">
                        <i class="glyphicon glyphicon-question-sign"></i>
                        <div class="detail">
                            <p>登录微信公众号服务平台：在菜单中找到开发—》基本配置—》</p>
                            <img src="~/Content/WxImgs/AppId.png" />
                        </div>
                    </div>
                
                    <a href="/ConfigManager/PublicHelp" target="_blank" style="text-decoration:none;">&nbsp;帮助</a>
                </div>

                <button class="btn btn-default" id="editBtn" type="button" style="position:absolute;bottom:40px;right:40px;display:none">
                    <i class="iconfont icon-edit"></i>  修改
                </button>

                <button class="btn btn-primary" id="smssmsSaveBtn" type="button" onclick="$.MGJ.WX_bing.Ajax_Verify();" style="position:absolute;bottom:40px;right:40px;">
                    <i class="iconfont icon-baocun"></i>保存
                </button>

            </div>
        </form>
        @*<div role="tabpanel" class="tab-pane text-center padding-top-80 height-500" id="OpenSource" style="position:relative;background:#F8F8F8">
                <div class="row">
                    <div class="col-xs-2 col-xs-offset-2">是否第三方:</div>
                    <div class="col-xs-5 text-left">
                        <input type="radio" name="ThirdParty" />是
                        <input type="radio" name="ThirdParty" style="margin-left:30px;" />否
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 col-xs-offset-2">第三方URL:</div>
                    <div class="col-xs-5">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row" style="position:relative">
                    <div class="col-xs-2 col-xs-offset-2">第三方Secret:</div>
                    <div class="col-xs-5">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="margin-top-50" style="font-size:12px;">
                    如果您的微信主要是在其他平台使用,可以开启开源设置,智能回复等功能将交给配置的平台处理。若有更改请重新提交
                    <div class="question">
                        <i class="glyphicon glyphicon-question-sign"></i>
                        <div class="detail">第三方</div>
                    </div>
                </div>
                <button class="btn btn-primary" style="position:absolute;bottom:40px;right:40px">保存</button>
            </div>*@
        <form id="Merchant" class="tab-pane text-center padding-top-80 height-500" name="WX_MerchantInfo" role="tabpanel" style="position:relative;background:#F8F8F8">
            <div>
                <div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 text-right"><span class="red-700">*</span>商户名:</div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <input type="text" class="form-control" name="CommercialName" id="CommercialName" />
                    </div>
                </div>
                <div class="row" style="position:relative">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 text-right"><span class="red-700">*</span>商户公众号:</div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <input type="text" class="form-control" name="mchid" id="mchid" />
                    </div>
                </div>
                <div class="row" style="position:relative">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 text-right"><span class="red-700">*</span>商户Key:</div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <input type="text" class="form-control" name="CommercialKey" id="CommercialKey" />
                    </div>
                </div>
                <div class="row" style="position:relative">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 text-right"><span class="red-700">*</span>上传证书:</div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 text-left">
                        <div id="uploader" class="wu-example">
                            <!--用来存放文件信息-->
                            <div id="thelist" class="uploader-list"></div>
                            <div class="btns" id="uploaderBtnRow">
                                <div id="picker2" class="btn btn-default">选择文件</div>
                                @*<button id="ctlBtn" onclick="upload()" class="btn btn-default">开始上传</button>*@
                            </div>
                        </div>
                        @*<input type="text" class="form-control" name="CredentialAddress" id="CredentialAddress" />*@
                        <input id="fileName" type="hidden" name="fileName" value="" />
                    </div>
                </div>

                <div class="row" style="position:relative">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 text-right"><span class="red-700">*</span>API密钥:</div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <input type="text" class="form-control" name="CredentialPwd" id="CredentialPwd" />
                    </div>
                </div>
            </div>
            <div class="margin-top-50" style="font-size:12px;">
                如果您有微信支付、微信红包,此参数可用于微信购买支付和发送红包等相关相信。若有更改请重新提交!
                <div class="question">
                    <i class="glyphicon glyphicon-question-sign"></i>
                    <div class="detail">
                        <p>商户号：注意一个公众号绑定一个商户号，并且不可以被修改。请确认自己的公众号绑定的是该商户号。登录微信公众号服务平台：在菜单中找到微信支付—》商户信息—》</p>
                        <img src="~/Content/WxImgs/BusinessInfo1.png" />
                        <p>商户支付密钥：登录微信商户平台<a href="https://pay.weixin.qq.com/">https://pay.weixin.qq.com/</a>头部菜单中找到账户中心—》左部菜单找到API安全</p>
                        <img src="~/Content/WxImgs/BusinessInfo2.png" />
                        <p>点击后会弹出确认窗，如果您的公众号做过支付相关功能，请勿随意修改，请跟相关人员确认有没有商户支付密钥。如果不记得密钥：<a href="https://suijimimashengcheng.51240.com/">‘https://suijimimashengcheng.51240.com/’</a>在该网址下生成一个32位密码并牢记</p>
                    </div>
                </div>
                <a href="/ConfigManager/UserHelp" target="_blank" style="text-decoration:none;">&nbsp;帮助</a>
            </div>
            <button class="btn btn-default" id="editBtn2" type="button" style="position:absolute;bottom:40px;right:40px;display:none">
                <i class="iconfont icon-edit"></i>  修改
            </button>

            <button class="btn btn-primary" type="button" id="sunBtn2" style="position: absolute; bottom: 40px; right: 40px; display: none">
                <i class="iconfont icon-baocun"></i>保存
            </button>
        </form>
    </div>
</div>


<div id="phone" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            @*<div class="modal-header" style="padding: 0px; background-color: transparent"></div>*@
            <div class="modal-body" style="padding:0">
                <div class="phone-show">
                    @*<img src="~/Content/webImgs/Market/CreateActivities/u598.png" />*@
                    <div id="show-con">
                        <div id="qr_code"></div>
                        <div id="hintText"></div>
                    </div>
                </div>
            </div>
            @*<button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span>×</span>
                </button>*@
        </div>
    </div>
</div>

<script>
    var tabState1 = 0;//app状态
    var tabState2 = 0;//商户号状态
    $("#editBtn").on("click", function () {
        $("#WX_AppInfo input").removeAttr("readonly");;
        $("#smsSaveBtn").show();
        $("#editBtn").hide();
    });
    $("#editBtn2").on("click", function () {
        $("#picker2").show();
        $("#Merchant input").removeAttr("readonly");
        $("#sunBtn2").show();
        $("#editBtn2").hide();
    });
    function tab1()
    {
        $.MGJ.WX_bing.Ajax_BindLoad(1);
        //$.MGJ.WX_bing.ViaTab1(tabState1);
 
    }
    function tab2()
    {
        $.MGJ.WX_bing.Ajax_BindLoad(2);
        //$.MGJ.WX_bing.ViaTab2(tabState2);
    
    }
    var IsReady = 0;
    var uploader = WebUploader.create({
        // swf文件路径
        //        swf: BASE_URL + '/js/Uploader.swf',
        //指定拖拽容器
        dnd: '#thelist',
        //截图可粘贴区域
        paste: 'document.body',

        // 文件接收服务端。
        server: '/ConfigManager/AppSave',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
            id: '#picker2',
            multiple: false//只能选择一个文件上传
        },
        accept: {
            title: 'p12',
            extensions: 'p12',
            mimeTypes: 'p12'
        },

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });

    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
        IsReady = 1;
        $(".item").remove();
        $("#uploaderBtnRow").prepend('<div id="' + file.id + '" class="item" style="display:inline-block">' +
            '<span class="info">' + file.name + '</span>' +
        '</div>');
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {
        var $li = $('#' + file.id),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if (!$percent.length) {
            $percent = $('<div class="progress progress-striped active">' +
              '<div class="progress-bar" role="progressbar" style="width: 0%">' +
              '</div>' +
            '</div>').appendTo($li).find('.progress-bar');
        }
        $li.find('p.state').text('上传中');

        $percent.css('width', percentage * 100 + '%');
    });
    uploader.on('uploadSuccess', function (file) {
        $('#' + file.id).find('p.state').text('已上传');
        $.L.msgSuccess("操作成功！");
    });

    uploader.on('uploadError', function (file) {
        $('#' + file.id).find('p.state').text('上传出错');
    });

    uploader.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').fadeOut();
    });

    function upload() {
        uploader.upload();
    }

    $("#sunBtn2").click(function () {
    
        var data = JSON.stringify($("#Merchant").serializeObject());
            if (IsReady == 1) {
                uploader.options.formData = { "submitData": data };
                uploader.upload();
                $.MGJ.WX_bing.Ajax_AppSave(data, "wx_info");
            }
            else {

                //$("#phone").modal("show");

                ////生成二维码
                ////   var qrstring = "http://tapp.m12315.com/PreView/ActivityHome?aId="+$(ele).attr('Id');
                //var qrstring = "http://tapp.m12315.com/WX/PreHome?aId=";
                //$("#qr_code").html("");
                ////二维码
                //$("#qr_code").qrcode({
                //    width: 120, //宽度
                //    height: 120, //高度
                //    //text: qrsting //任意内容
                //    text: qrstring
                //});
                //$('#hintText').html('请用微信扫描验证！');
                $.MGJ.WX_bing.Ajax_AppSave(data,"wx_info");
            }
        
        //$.MGJ.OrganizationalManage.Dialog_AddOrganizationalObj.close();
    });

  
</script>



<script>
    $.MGJ.WX_bing.Ajax_BindLoad(1);
    $(".CopyBtn").on("click", function () {
        var index = $(".CopyBtn").index($(this))
        var text = $(".CopySpan").eq(index).text();
        var input = $(".CopyInput").eq(index).val(text).select();
        document.execCommand("copy");
    });
    function DetailAbsolute() { 
        $(".question").each(function () {
            var $Detail = $(this).children(".detail");
            var thisPadding = parseInt($Detail.css("padding")) * 2;
            var Height =$(this).height() + $Detail.height() + thisPadding;
            var Width =$(this).width() + $Detail.width() + thisPadding;
            if (Height < document.body.clientHeight) { $Detail.css({ "right": $(this).width() }) }
        })
    }
    DetailAbsolute()

    $(".myTabs").on("click", function () {
        timedMsg()
    })

    function timedMsg() {
        var t = setTimeout(DetailAbsolute(), 2000)
    }

    $(".question").click(function () {
        $(".detail").toggle();
    })

    $(function () {
        $('#WX_AppInfo').bootstrapValidator({
            fields: {
                AppId: {
                    validators: {
                        notEmpty: {
                            message: 'AppId不能为空'
                        }
                    }
                },
                AppSecret: {
                    validators: {
                        notEmpty: {
                            message: 'AppSecret不能为空'
                        }
                    }
                }
            }
        })
    });
    $(function () {
        $('#Merchant').bootstrapValidator({
            fields: {
                CommercialName: {
                    validators: {
                        notEmpty: {
                            message: '商户名不能为空'
                        }
                    }
                },
                mchid: {
                    validators: {
                        notEmpty: {
                            message: '商户公众号不能为空'
                        }
                    }
                },
                CommercialKey: {
                    validators: {
                        notEmpty: {
                            message: '商户Key不能为空'
                        }
                    }
                },
                CredentialPwd: {
                    validators: {
                        notEmpty: {
                            message: 'API密钥不能为空'
                        }
                    }
                }
            }
        })
    });
</script>